<div style="width:100%;height:100%">
  <itmp-ol-map #map (ready)="onReady($event)" [mapSize]="mapStyle" [mapOption]="mapOptions"></itmp-ol-map>
  <div class="button-box flex flex-row flex-items-center">

    <button class="btn-item" nz-button nzSize="small" (click)="rotateRight()">↻</button>
    <button class="btn-item" nz-button nzSize="small" (click)="rotateLeft()">↺</button>
    <button class="btn-item" nz-button nzSize="small" (click)="panToLon()">Pan to london</button>
    <button class="btn-item" nz-button nzSize="small" (click)="elasticToMosc()">Elastic to Moscow</button>
    <nz-select class="btn-item" [(ngModel)]="styleSelection" nzPlaceHolder="" style="width: 200px" (ngModelChange)="onChange($event)">
      <nz-option
        *ngFor="let style of stylesOptions"
        [nzLabel]="style.label"
        [nzValue]="style.value">
      </nz-option>
    </nz-select>
    <nz-select class="btn-item" [(ngModel)]="drawType" nzPlaceHolder="" style="width: 200px" (ngModelChange)="onTypeChange($event)">
      <nz-option
        *ngFor="let type of drawTypeOptions"
        [nzLabel]="type"
        [nzValue]="type">
      </nz-option>
    </nz-select>
    <!-- <nz-slider #sliderInstance [nzMax]="999" [nzMin]="10" [nzStep]="10"></nz-slider>
    <button class="btn-item" nz-button nzSize="small" (click)="startAnimate(sliderInstance.value)">Start Animation</button> -->
  </div>
</div>
